<template>
  <div>
    <!-- main -->
    <div class="main">
      <div class="main-search">
        <div class="container">
          <div class="search-content">
            <el-form class="layui-form search-single">
              <el-input v-model="listQuery.params.title" placeholder="请输入资料名称" @blur="searchNews">
                <span slot="append" style="background-color: #01CB94;cursor:pointer" @click="searchNews">搜索</span>
              </el-input>
            </el-form>
            <router-link :to="{ name: 'addDoc'}" class="btn btn-info btn-shadow btn-create">创建</router-link>
          </div>
        </div>
      </div>
      <div class="main-container" style="margin-left: 0px">
        <div class="container">
          <div class="location clearfix" />
          <div class="list-news">
            <data-table
              ref="pagingTable"
              :options="options"
              :list-query="listQuery"
            >
              <template slot="data-columns">
                <el-table-column
                  label="资料名称"
                  prop="title"
                />

                <el-table-column
                  label="资料分类"
                  prop="docType_dictText"
                  align="center"
                />

                <el-table-column
                  label="资料来源"
                  prop="docFrom"
                  align="center"
                />
                <el-table-column
                  label="关键字"
                  prop="keyWord"
                  align="center"
                />
                <el-table-column
                  label="创建时间"
                  align="center"
                  prop="createTime"
                />
                <el-table-column
                  label="审核状态"
                  align="center"
                  prop="status_dictText"
                />
                <el-table-column
                  label="操作"
                  align="center"
                  width="120px"
                >
                  <template slot-scope="scope">
                    <button class="layui-btn layui-btn-xs layui-btn-hollow iconfont el-icon-view" title="预览" @click="handlePreview(scope.row)" />&nbsp;&nbsp;
                    <button v-if="scope.row.status === '1' || scope.row.status === '4'" class="layui-btn layui-btn-xs layui-btn-hollow iconfont icon-edit" lay-event="edit" title="编辑" style="color: #33C499" @click="toUpdate(scope.row.id)" />
                    &nbsp;
                    <button class="layui-btn layui-btn-xs layui-btn-hollow iconfont icon-trashcan" lay-event="delete" title="删除" style="color: #FF674F" @click="deleteById(scope.row.id)" />
                    &nbsp; &nbsp;
                    <button v-if="scope.row.status === '1'" class="layui-btn layui-btn-xs layui-btn-hollow iconfont icon-review" lay-event="review" title="提交审核" style="color: #8788FF" @click="submiReview(scope.row.id)" />
                  </template>
                </el-table-column>

              </template>

            </data-table>
          </div>
        </div>
      </div>
    </div>
    <!-- main end -->
    <el-dialog title="文件预览" :close-on-click-modal="false" :visible.sync="previewVisible" width="60%" top="4vh" @close="closePreview">
      <div style="max-height: 650px; overflow-x: hidden; overflow-y: scroll">

        <pdf-frame
          v-if="previewData.fileType === '11'"
          :src="previewData.viewUrl"
        />
      </div>
    </el-dialog>

  </div>

</template>

<script>

import DataTable from '@/components/WebDataTable' // 权限判断函数
import PdfFrame from './components/PdfFrame'
import { deleteById, submiReview } from '@/api/document/document'

export default {
  name: 'MyDocList',
  components: { DataTable, PdfFrame },
  props: {

  },
  data() {
    return {
      previewVisible: false,
      previewData: {},
      searchKey: '',
      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: ''
        }
      },

      options: {
        // 列表请求URL
        listUrl: '/api/doc/doc/myDocPaging'
      },
      data: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },

  created() {

  },
  methods: {
    searchNews() {
      this.$refs.pagingTable.getList()
    },
    toUpdate(id) {
      this.$router.push({ name: 'updateDoc', params: { id: id }})
    },
    deleteById(id) {
      this.$confirm('确定要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteById(id).then(res => {
          this.$notify({
            title: '成功',
            message: '删除成功！',
            type: 'success',
            duration: 2000
          })
          this.$refs.pagingTable.getList()
        })
      }).catch(() => {

      })
    },
    submiReview(id) {
      this.$confirm('确定要提交审核吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        submiReview(id).then(res => {
          this.$notify({
            title: '成功',
            message: '提交审核成功！',
            type: 'success',
            duration: 2000
          })
          this.$refs.pagingTable.getList()
        })
      }).catch(() => {

      })
    },
    handlePreview(data) {
      this.previewVisible = true
      this.previewData.fileType = '11'
      this.previewData.viewUrl = data.viewUrl
      this.previewData.fileUrl = data.fileUrl
    },
    closePreview() {
      this.previewData = {}
    }
  }
}
</script>

<style>

.el-input-group__append, .el-input-group__prepend {
  background-color: #01CB94;
  color: #fff;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #01CB94;
  border-radius: 0px;
  padding: 0 20px;
  width: 1px;
  white-space: nowrap;
}
.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #01CB94;
  color: #fff;
}
</style>

